<style>
  .logic-proof-input-box {
    border: 1px solid #ccc;
  }
  .logic-proof-erroneous-line {
    font-weight: bold;
  }
  .logic-proof-mistake-message {
    color: red;
  }
</style>

<script type="text/ng-template" id="interactiveWidget/LogicProof">
  <div>
    <[questionString]>
    <div class="logic-proof-input-box">
      <div ui-codemirror="{onLoad: codeEditor}">
        <textarea ng-trim="false" rows="10"></textarea>
      </div>
    </div>
    <button class="btn btn-default" ng-click="submitProof()">Submit</button>
    <button class="btn btn-default" ng-click="showHelp()">Possible lines</button>
    <p class="logic-proof-mistake-message"> <[proofError]>  </p>
  </div>
</script>

<script type="text/ng-template" id="response/LogicProof">
  <div>
    <[answer.displayed_question]>
    <div ng-if="answer.correct">
      <pre><[answer.displayed_proof[0]]></pre>
    </div>

    <div ng-if="!answer.correct">
      <div>
        <pre><[answer.displayed_proof[0]]><div class="logic-proof-erroneous-line"><[answer.displayed_proof[1]]></div><[answer.displayed_proof[2]]></pre>
      </div>
      <p class="logic-proof-mistake-message"><[answer.displayed_message]></p>
    </div>
  </div>
</script>
